<template>
  <section class="todoapp">
    <!-- 头部部分 -->
    <Header @addList="addList" :list="list"></Header>
    <!-- 主体部分 -->
    <Body :list="renderList" @delList='delList' @checkAll="checkAll"></Body>
    <!-- 底部部分 -->
    <Footer :type="type" :list="list" @clearList="clearList" @changeType="changeType" ></Footer>
  </section>
</template>

<script>
import Header from '@/components/myheader.vue'
import Body from '@/components/mybody.vue'
import Footer from '@/components/myfooter.vue'
export default {
  components: {
    Header,
    Body,
    Footer
  },
  data () {
    return {
      type: '',
      list: JSON.parse(localStorage.getItem('list')) || [{ play: '吃饭', id: 1, edit: false },
        { play: '蹦迪', id: 2, edit: true },
        { play: '打游戏', id: 3, edit: false }]
    }
  },
  methods: {
    delList (id) {
      this.list = this.list.filter(item => item.id !== id)
    },
    addList (obj) {
      this.list = [obj, ...this.list]
    },
    clearList () {
      this.list = this.list.filter(item => !item.edit)
    },
    changeType (type) {
      this.type = type
    },
    checkAll (value) {
      this.list.forEach(item => { item.edit = value })
    }

  },
  computed: {
    renderList () {
      switch (this.type) {
        case 'selected':
          return this.list
        case 'active':
          return this.list.filter(item => !item.edit)
        case 'completed':
          return this.list.filter(item => item.edit)

        default:
          return this.list
      }
    }
  },
  watch: {
    list: {
      deep: true,
      handler (newValue) {
        localStorage.setItem('list', JSON.stringify(newValue))
      }
    }
  }
}
</script>

<style></style>
